<template>
  <div class="tpl9-head">
    <section class="mobile9-header-top">
      <img :src="tplItemData.bg">
      <section class="mobile9-headerbot-le">
        <img :src="tplItemData.photo" width="68" height="68">
      </section>
      <b class="j-shopTitle">{{wxConfig.jsapi_title}}</b>
    </section>
    <section class="mobile9-headerbot">
      <section class="mobile9_headerbot_ri">
        <ul >
          <li v-for="(item,index) in tplItemData.datasets" :key="index">
            <span v-if="index==0&&item.initialize==1">{{tplItemData.itemNum}}</span>
            <span v-else-if="index==1&&item.initialize==1">{{tplItemData.newItemNum}}</span>
            <span v-else-if="index==2&&item.initialize==1">
              <img :src="item.logo" width="18" height="16">
            </span>
            <span v-else-if="index==3&&item.initialize==1">
              <img :src="item.logo" width="18" height="16">
            </span>
            <span v-else>
              <img :src="item.pic" width="18" height="16">
            </span>
             <a :style="{'color':item.titleColor}"  @click="openLink(item.link)">{{item.showtitle}}</a>
          </li>
        </ul>
      </section>
    </section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { openPage } from '@/utils/utils'

export default {
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    }
  }
}
</script>

<style lang="scss">
.tpl9-head{
  .mobile9-header-top{
    width: 100%;
    height: auto;
    overflow: hidden;
    position:relative;
    border-bottom: #04153c solid 8px;
    img{
      width: 100%;
      display: block;
    }
    b{
      position: absolute;
      top: 76px;
      left: 220px;
      font-size: 40px;
      text-shadow: -2px 4px 4px #FFF;
      color: #000;
    }
    .mobile9-headerbot-le{
      position: absolute;
      top: 30px;
      left: 52px;
      width: 136px;
      height: 136px;
      padding: 4px;
      background: #fff;
      border-radius: 50%;
      overflow: hidden;
      img{
        border-radius: 50%;
      }
    }
  }
  .mobile9-headerbot{
    width: 100%;
    height: 88px;
    position: relative;
    border-bottom: #ccc solid 1px;
    border-top: #e1e3e8 solid 1px;
    box-shadow: #ccc 2px 0 10px;
    margin-bottom: 20px;
    .mobile9_headerbot_ri{
      // width: 75%;
      // float: right;
      ul {
        li{
          float: left;
          width: 25%;
          text-align: center;
          overflow: hidden;
          background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl7/header3.jpg) no-repeat right;
          background-size:2px 54px;
          &:last-child{
              background:transparent;
          }
          span{
            display: block;
            height: 36px;
            line-height: 34px;
            color: #696969;
            margin-top: 4px;
            font-size: 32px;
          }
          a{
            display: block;
            color: #404040;
            line-height: 36px;
            margin-top: 4px;
          }
        }
      }
    }
    
  }
}
</style>